<template>
	<view class="item l-f l-row-sb">
		<view class="l-f">
			<view>
				<image
				class="item_icon"
				src="@/static/images/index_record_video.png" 
				mode="widthFix"></image>
			</view>
			<view class="item_info">
				<view class="item_info_title">{{options.name}}</view>
				<view class="item_info_size">{{options.size}}</view>
			</view>
		</view>
		<view 
		class="item_status"
		:class="options.status === 0 || options.status === 1 ? 'item_active' : ''"
		>{{options.status | statusFilter}}</view>
	</view>
</template>

<script>
	export default {
		name:"video-item",
		props:{
			options: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		filters: {
			statusFilter: function(val) {
				switch(val) {
					case 0: return '上传中...'
					case 1: return '上传成功'
					case 2: return '上传失败'
				}
			}
		},
	}
</script>

<style lang="scss">
.item {
	padding: 28rpx 0;
	box-sizing: border-box;
	&_icon {
		width: 102rpx;
		height: 102rpx;
	}
	&_info {
		margin-left: 20rpx;
		&_title {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 700;
		}
		&_size {
			margin-top: 36rpx;
			font-size: 24rpx;
			color: rgba(139, 135, 135, 1);
		}
	}
	&_status {
		border: 2rpx solid rgba(117, 117, 117, 1);
		padding: 0 20rpx;
		height: 50rpx;
		border-radius: 25rpx;
		font-size: 20rpx;
		color: rgba(117, 117, 117, 1);
		line-height: 50rpx;
		text-align: center;
	}
	&_active {
		border: 2rpx solid rgba(50, 193, 201, 1);
		color: rgba(47, 192, 200, 1);
	}
}
</style>